<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>s2c</title>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="css/index.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div id="app" v-loading="loading" :element-loading-text="showLoadingMessage">
            <div id="main" style="background-color: #f0f0f0;height: 650px;width: 50%;margin: 0px 0px 0px 25%;min-width: 750px">
                <div>
                    <h2><img class="main-title" src="icon/tool.svg" >S2C服务迁移工具</h2>
                </div>
                <div class="main-steps">
                    <el-steps :space="200" align-center :active="stepsStatus" finish-status="success">
                        <el-step title="环境设置"></el-step>
                        <el-step title="指纹库下载"></el-step>
                        <el-step title="系统扫描"></el-step>
                        <el-step title="服务扫描"></el-step>
                        <el-step title="文件迁移"></el-step>
                      </el-steps>
                </div>
                <!--设置目标系统版本-->
                <div v-if="stepData.initcfg" style="margin-left: 32%;;margin-top: 140px;">
                    <el-form>
                        <el-form-item label="目标操作系统:">
                            <el-select v-model="targetSystemValue" @change="setTargetSystem" filterable placeholder="选择目标操作系统">
                                <el-option
                                    v-for="item in systemOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div style="margin-top: 50px;">
                        <el-button style="width: 120px;margin-left: 36%;" @click="stepGoto(1)" type="primary">下一步</el-button>
                    </div> 
                </div>
                <!--指纹下载-->
                <div v-if="stepData.welcome" style="text-align: center;margin-top: 80px;">
                    <!-- <h1>{{mainTitle}}</h1> -->
                    <span v-if="systemDictExist">系统指纹库已经存在，请点击下一步按钮重新下载，或点击跳过按钮进行系统文件扫描</span>
                    <span v-else>请点击下一步按钮下载当前默认系统指纹库文件</span>
                    <div style="margin-top: 130px;">
                        <el-button style="width: 120px;" @click="stepReturn(1)" type="primary">返回</el-button>
                        <el-button v-if="systemDictExist" @click="skipStepNext(2)" style="width: 120px;" type="primary">跳过</el-button>
                        <el-button style="width: 120px;" @click="stepGoto(2)" type="primary">下一步</el-button>
                    </div> 
                </div>
                <!--系统文件扫描-->
                <div v-if="stepData.downloadDict" style="text-align: center;margin-top: 80px;">
                    <!-- <h1>{{mainTitle}}</h1> -->
                    <h3>{{stepStatus}}</h3>
                    <span>点击下一步按钮进行系统文件扫描，或点击跳过按钮不做系统文件扫描操作</span>
                    <div style="margin-top: 100px;">
                        <el-button style="width: 120px;" @click="stepReturn(2)" type="primary">返回</el-button>
                        <el-button style="width: 120px;" @click="skipStepNext(3)" type="primary">跳过</el-button>
                        <el-button style="width: 120px;" @click="stepGoto(3)" type="primary">下一步</el-button>
                    </div>
                </div>
                <!--系统文件扫描-->
                <div v-if="stepData.scanSystem" style="text-align: center;margin-top: 80px;">
                    <!-- <h1>{{mainTitle}}</h1> -->
                    <h3>{{stepStatus}}</h3>
                    <div style="padding: 15px; width: 25%; margin: 0 auto;">
                        <el-progress :text-inside="true" :stroke-width="24" :percentage="percentage" status="success"></el-progress>
                    </div>
                    <!-- 只有进度条100时才显示下面信息 -->
                    <div v-if="percentage === 100">
                        <span style="padding: 8px;">
                            文件总数: {{scanFileData.file}}
                        </span>
                        <span style="padding: 8px;">
                            文件路径: {{scanFileData.dir}}
                        </span>
                        <span style="padding: 8px;">
                            新增文件: {{scanFileData.new_count}}
                        </span>
                        <br>
                        <span>点击下一步按钮进行系统已启动的程序扫描，或点击跳过按钮</span>
                        <div style="margin-top: 40px;">
                            <el-button style="width: 120px;" @click="stepReturn(3)" type="primary">返回</el-button>
                            <el-button style="width: 120px;" @click="skipStepNext(4)" type="primary">跳过</el-button>
                            <el-button style="width: 120px;" @click="stepGoto(4)" type="primary">下一步</el-button>
                        </div>
                    </div>
                </div>
                <!--扫描系统服务-->
                <div v-if="stepData.scanProcess" style="text-align: center;margin-top: 80px;">
                    <!-- <h1 style="padding: 10px;">{{mainTitle}}</h1> -->
                    <h3>已启动的通用系统服务
                        <el-button type="text" @click="stepGoto(4)">{{`刷新`}}</el-button>
                        <el-button type="text" @click="allService()">{{`更多服务`}}</el-button>
                    </h3>
                    <ul class="server">
                        <li v-for="item in serveOption" :key="item.name" @click="handleSelect(item.name)">
                        <p><img :src="serverDict[item.name.toLowerCase()]" :title="item.name"></p>
                        <span>{{item.name}}</span>
                        <img class="selected-icon" src="icon/select.svg" v-if="selectedName.indexOf(item.name) !== -1 ">
                        </li>
                    </ul>
                    <span>选择服务程序点击下一步按钮进行Dockerfile创建</span>
                    <div style="margin-top: 30px;">
                        <!--直接返回第三部，调过扫描步骤-->
                        <el-button style="width: 120px;" @click="stepReturn(3)" type="primary">返回</el-button>
                        <el-button style="width: 120px;" @click="stepGoto(5)" type="primary">下一步</el-button>
                        <!-- <el-button style="width: 120px;" @click="allService()" type="primary">更多服务</el-button> -->
                    </div>
                    <el-table ref="multipleTable" v-if="showAllService" :data="allServiceData" stripe :show-header="true" @selection-change="handleSelectionChange" style="background-color: #c0c4cc;padding: 1px;margin-top: 18px;">
                        <el-table-column type="selection" width="60"></el-table-column>
                        <el-table-column type="index" label="#"></el-table-column>
                        <el-table-column prop="user" label="用户"></el-table-column>
                        <el-table-column prop="name" label="名称"></el-table-column>
                    </el-table>
                </div>
                <!--文件列表-->
                <div v-if="stepData.createDocker" style="text-align: center;margin-top: 30px;">
                    <!-- <h1 style="padding: 10px;">{{mainTitle}}</h1> -->
                    <div class="table-box">
                        <h3>{{serviceTitle}}
                            <!-- <el-button type="text" @click="stepReturn(4)">{{`返回`}}</el-button> -->
                        </h3>
                        <el-button v-if="ativeName === 'first'" type="primary" class="add-button" style="right: 206px;width: 100px;" @click="stepReturn(5)">{{`返回`}}</el-button>
                        <el-button v-if="ativeName !== 'first'" type="primary" class="add-button" style="width: 100px;" @click="stepReturn(5)">{{`返回`}}</el-button>
                        <el-button v-if="ativeName === 'first'" style="right: 103px;" class="add-button" type="primary" @click="downloadServiceFile">文件下载</el-button>
                        <el-button v-if="ativeName === 'first'" class="add-button" type="primary" @click="addDockerFile">手动添加</el-button>
                        <el-tabs type="border-card" v-model="ativeName" @tab-click="handleClick">
                            <el-tab-pane label="文件" name="first"></el-tab-pane>
                            <el-tab-pane label="预览DockerFile" name="dockerfile"></el-tab-pane>
                            <el-tab-pane label="DockerImage" name="dockerimage"></el-tab-pane>
                        </el-tabs>
                        <el-table v-if="ativeName === 'first'" v-loading="loading" :data="serviceData.slice((currentPage-1)*pageSize,currentPage*pageSize)"  stripe :show-header="true" style="width: 100%">
                            <!-- <el-table-column type="selection" width="60"></el-table-column> -->
                            <el-table-column type="index" label="#" width="70" align="center"></el-table-column>
                            <el-table-column prop="name" label="文件名称" width="800"></el-table-column>
                            <!-- <el-table-column prop="type" label="类型" width="180"></el-table-column> -->
                            <!-- <el-table-column prop="modify" label="是否修改">
                                <template slot-scope="scope">
                                    <el-tag  color="#fff" v-if="!scope.row.modify">无</el-tag>
                                    <el-tag  color="#fff" v-else>有修改</el-tag>
                                </template>
                            </el-table-column> -->
                            <el-table-column prop="move" label="是否迁移">
                                <template slot-scope="scope">
                                    <img v-if="scope.row.move" class="little-img" src="icon/right.svg" >
                                    <img v-else class="little-img" src="icon/wrong.svg" >
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="操作" align="center" min-width="100">
                                <template slot-scope="scope">
                                <el-button type="text" @click="editfile(scope.row)">{{`编辑`}}</el-button>
                                </template>
                            </el-table-column> -->
                        </el-table>
                        <div v-if="ativeName === 'first'" class="tabListPage">
                            <el-pagination @size-change="handleSizeChange" 
                                           @current-change="handleCurrentChange" 
                                           :current-page="currentPage" 
                                           :page-sizes="pageSizes" 
                                           :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" 
                                           :total="serviceDataLength">
                              </el-pagination>
                        </div>
                        <div v-if="ativeName === 'dockerfile'" v-loading="loading" style="width: 100%" >
                            <textarea name="name" v-model="dockerData" rows="2" cols="80" style="width: 99%;height: 512px;display: block; margin: 0 auto;"></textarea>
                            <div>
                                <el-button type="primary" style="margin: 0 auto; margin-top: 10px;" @click="updateDockerFile()">{{`更新Dockerfile`}}</el-button>
                                <el-button type="primary" :disabled="buildProButton" :loading="buildProButton" @click="buildImage()">{{`Build Docker Image`}}</el-button>
                            </div>
                        </div>
                        <el-table v-if="ativeName === 'dockerimage'" :data="imageData"  stripe :show-header="true" style="width: 100%">
                            <el-table-column type="index" label="#" width="20" align="center"></el-table-column>
                            <el-table-column prop="name" label="REPOSITORY" width="200"></el-table-column>
                            <el-table-column prop="tag" label="TAG" width="80"></el-table-column>
                            <el-table-column prop="imageid" label="IMAGE ID" width="160"></el-table-column>
                            <el-table-column prop="create" label="CREATED" width="130"></el-table-column>
                            <el-table-column prop="size" label="SIZE" width="70"></el-table-column>
                            <el-table-column label="操作" align="center" min-width="90">
                                <template slot-scope="scope">
                                <el-button type="text" @click="downloadImage(scope.row)">{{`下载`}}</el-button>
                                <el-button type="text" @click="testImage(scope.row)">{{`测试`}}</el-button>
                                <el-button type="text" @click="deleteImage(scope.row)">{{`删除`}}</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

                <!--提示信息-->
                <el-dialog :title="dialogTitle" :visible.sync="dialogVisble" center>
                    <textarea name="name" v-model="dialogMessage" rows="2" cols="80" style="width: 775px;height: 512px;display: block; margin: 0 auto; max-width: 100%;"></textarea>
                </el-dialog>

            </div>
        </div>
    </body>
    <!-- 引入组件库 -->
    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/http.js"></script>
    <script src="js/api.js"></script>
    <script src="js/utils.js"></script>
    <script>
        //import rest from './js/rest'
        var app = new Vue({
            el: "#app",
            data: function() {
                return {
                    mainTitle: 'S2C服务迁移工具',
                    timer: null,
                    scanFileData: {},
                    stepsStatus: 1,
                    stepStatus: '',
                    showLoadingMessage: '',
                    systemDictExist: true,
                    imageData: [],
                    dialogTitle: '',
                    dialogMessage: '',
                    dialogVisble: false,
                    serviceTitle: '服务文件列表',
                    downButton: false,
                    scanProButton: false,
                    buildProButton: false,
                    showAllService: false,
                    percentage: 0,
                    subTitle: 'MyLinux 服务器',
                    selectedName: [],
                    allServiceData: [],
                    ativeName: 'first',
                    dockerData: '',
                    serverDict: {
                        nginx: './icon/nginx.svg',
                        httpd: './icon/apache.svg',
                        redis: './icon/redis.svg',
                        mysqld: './icon/mysql.svg',
                        php: './icon/php.svg',
                        'php-fpm': './icon/php.svg',
                        other: './icon/other.svg',
                    },
                    multipleSelection: [],
                    serveOption: [],
                    loading: false,
                    serviceData: [],
                    serviceDataLength: 0,
                    currentPage: 1,
                    pageSizes: [10,20,50,100],
                    pageSize: 10,
                    stepIndex: 0,
                    stepData: {
                            initcfg: false,
                            welcome: false,
                            downloadDict: false,
                            scanSystem: false,
                            scanProcess: false,
                            createDocker: false
                        },
                    stepDataIndx: [
                        'initcfg',
                        'welcome',
                        'downloadDict',
                        'scanSystem',
                        'scanProcess',
                        'createDocker'
                    ],
                    systemOptions: [],
                    targetSystemValue: '',
                    returnStatus: false
                }
            },
            async created() {
               console.log('---init---')
               const targtObj = await get_target_system()
               this.systemOptions = targtObj.option
               this.targetSystemValue = targtObj.local_target
               console.log('-----------init-------system-------', this.systemOptions)
               this.returnStatus = window.localStorage.getItem('returnStatus')
               this.getSystemDictStatus()
               if (!await this.checkScanRuning()) {
                    const index = window.localStorage.getItem('stepindex')
                    if (index != undefined) {
                        this.stepGoto(Number(index))
                    } else {
                        // 从第一步开始
                        this.stepGoto(0)
                    }
               }
               
            },
            methods: {
                initData() {
                    this.multipleSelection = []
                    this.selectedName = []
                    this.serviceTitle = '服务文件列表'
                    this.dockerData = ''
                    this.imageData = []
                    this.serveOption = []
                    this.serviceData = []
                },
                handleSelectionChange(val) {
                    if (val.length > 5) {
                        this.$message({
                            type: 'warning',
                            message: `迁移的服务数量过多`
                        })
                    }
                    this.multipleSelection = val
                    console.log('-----handleSelectionChange-----', this.multipleSelection)
                },
                allService() {
                    // 
                    if (this.showAllService) {
                        this.showAllService = false
                    } else {
                        this.showAllService = true
                    }
                },
                initStep(index) {
                    this.stepData.initcfg = false
                    this.stepData.welcome = false
                    this.stepData.downloadDict = false
                    this.stepData.scanSystem = false
                    this.stepData.scanProcess = false
                    this.stepData.createDocker = false
                },
                skipStepNext(index) {
                    // 跳过
                    this.stepGoto(index + 1)
                },
                stepReturn(index) {
                    // 返回上一步
                    this.returnStatus = true
                    window.localStorage.setItem('returnStatus', this.returnStatus)
                    this.stepGoto(index - 1)
                },
                handleSizeChange(val) {
                    // 改变每页显示的条数 
                    this.pageSize=val
                    // 注意：在改变每页显示的条数时，要将页码显示到第一页
                    this.currentPage=1
                },
                    // 显示第几页
                handleCurrentChange(val) {
                    // 改变默认的页数
                    this.currentPage=val
                },
                updateStepStatus() {
                    if (this.stepData.initcfg) {
                        this.stepsStatus = 0
                    } else if (this.stepData.welcome || this.stepData.downloadDict) {
                        this.stepsStatus = 1
                    } else if (this.stepData.scanSystem) {
                        this.stepsStatus = 2
                    } else if (this.stepData.scanProcess) {
                        this.stepsStatus = 3
                    }  else if (this.stepData.createDocker) {
                        this.stepsStatus = 4
                    }
                },
                stepGoto(index) {
                    // 情况load提示数据
                    // 记录当前步骤
                    window.localStorage.setItem('stepindex', index)
                    this.showLoadingMessage = ''
                    this.stepStatus = ''
                    // 把所有设置FALSE
                    this.initStep()
                    // 把下一个步骤设置为TRUE
                    this.stepData[this.stepDataIndx[index]] = true
                    console.log('------index--------' + index, this.stepData)
                    this.updateStepStatus()
                    console.log('------------steps status=====', this.stepsStatus)
                    console.log('------------steps status==returnStatus===', this.returnStatus)
                    // 如果等于true,不做提交，只修改步骤
                    if (this.returnStatus) {
                        this.returnStatus = false
                        return
                    }
                    window.localStorage.setItem('returnStatus', true)

                    if (this.stepDataIndx[index] === 'downloadDict') {
                        this.downloadSystemDict()
                    } else if (this.stepDataIndx[index] === 'scanSystem') {
                        this.startScan()
                    } else if (this.stepDataIndx[index] === 'scanProcess') {
                        this.scanProcess()
                    } else if (this.stepDataIndx[index] === 'createDocker') {
                        if (this.selectedName.length) {
                            this.getProcessService()
                        }
                    }
                },
                async setTargetSystem() {
                    await set_target_system(this.targetSystemValue)
                },
                async getSystemDictStatus() {
                    const ret = await get_system_dict_status()
                    if (ret && ret.data) {
                        this.systemDictExist = true
                    } else {
                        this.systemDictExist = false
                    }
                },
                async checkScanRuning() {
                    const retStatus = await get_scan_status()
                    console.log('---checkScanRuning status-------', retStatus)
                    let runTime = 0
                    if (retStatus && retStatus.status && retStatus.data && retStatus.data.create_time) {
                        const ctime = await get_system_time()
                        runTime = new Date(ctime.data) - new Date(retStatus.data.create_time)
                        console.log('--------', runTime)
                    }
                    // 如果扫描的状态不是100，并且扫描的时间已经超过1个小时，表示数据已经超时
                    // if (retStatus.status && retStatus.status !== 100) 
                    if (retStatus.data.status && retStatus.data.status !== 100 && runTime > 0 && runTime < 30 * 60 * 1000) {
                        this.$message({
                            showClose: true,
                            message: '系统正在扫描中.....',
                            type: 'warning'
                        })
                        this.stepData.scanSystem = true
                        this.stepStatus = '正在扫描系统文件.....'
                        console.log('----is runing----')
                        if (retStatus && retStatus.data && retStatus.data.status) {
                            this.percentage = retStatus.data.status
                        }
                        this.getScanStatus()
                        return true
                    }
                    console.log('----not run----')
                    return false
                },
                async getScanStatus() {
                    clearInterval(this.timer)

                    this.timer = setInterval(async() => {
                        const ret = await get_scan_status()
                        console.log('---getScanStatus status-------', ret)
                        if (ret && ret.data && ret.data.status) {
                            this.percentage = ret.data.status
                        }
                        let runTime = 0
                        if (ret.create_time) {
                            runTime = new Date(await get_system_time()) - new Date(ret.create_time)
                            console.log('--------', runTime)
                        }
                        // 如果扫描状态100，表示结束,runTime时间大于1个小时，表示超时
                        if (ret.data.status === 100) {
                            this.scanFileData = ret.data
                            this.stepStatus = '文件系统扫描结束'
                            // this.scanProcess()
                            clearInterval(this.timer)
                        } else if (runTime > 30 * 60 * 1000) {
                            this.stepStatus = '系统扫描已经超时'
                            clearInterval(this.timer)
                            this.$alert('系统扫描已经超时', '告警', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.$message({
                                    type: 'warning',
                                    message: `action: ${ action }`
                                })
                            }
                            })
                        }
                   }, 1000);
                },
                async startScan() {
                    // 程式
                    this.percentage = 0
                    if (await this.checkScanRuning()) {
                        return
                    }
                    this.initData()
                    this.stepStatus = '正在扫描系统文件.....'
                    const ret = await start_file_scan()
                    console.log('---startScan ret-------', ret)
                    this.getScanStatus()
                },
                async scanProcess() {
                    this.loading = true
                    this.scanProButton = true
                    const ret = await process_scan()
                    this.loading = false
                    this.scanProButton = false
                    if (ret.data && ret.data.utils) {
                        this.serveOption = ret.data.utils
                    }
                    if (ret.data && ret.data.all) {
                        this.allServiceData = ret.data.all
                    }
                    
                    console.log('---scanProcess-----', ret)
                },
                async updateDockerFile() {
                    this.loading = true
                    const ret = await update_dockerfile(this.dockerData)
                    this.loading = false
                    if (ret.status) {
                        this.$message({
                            showClose: true,
                            message: '更新成功',
                            type: 'success'
                        });
                    }
                },
                async downloadDockerFile() {
                    this.loading = true
                    const ret = await get_docker_buf()
                    console.log('----downloadDockerFile-----', ret)
                    this.loading = false
                    if (!ret.status) {
                        this.$message({
                            showClose: true,
                            message: '未找可用的Dockerfile',
                            type: 'warning'
                        })
                        return
                    }
                    this.dockerData = ret.data
                    //downloadFile(ret, 'Dockerfile')
                },
                async buildImage() {
                    this.buildProButton = true
                    const ret = await build_image()
                    console.log('-------build--ret-----', ret)
                    if (ret && ret.status) {
                        this.getCmdStatus(ret.data)
                    } else {
                        this.buildProButton = false
                        this.$message({
                            showClose: true,
                            message: 'Docker build失败',
                            type: 'warning'
                        })
                    }
                },
                async getCmdStatus(cmd) {
                    clearInterval(this.timer)
                    this.dialogMessage = ''
                    index = 0

                    this.timer = setInterval(async() => {
                        const ret = await get_cmd_status({cmd: cmd, index: index})
                        console.log('---getCmdStatus status-------', ret)
                        if (ret && !ret.status) {
                            clearInterval(this.timer)
                            return
                        }
                        if (ret && ret.data && ret.status) {
                            // this.dialogMessage += ret.data.data
                            for (const item of ret.data) {
                                if (item.status === 1) {
                                    this.dialogMessage += item.str + '\n'
                                    index = item.id
                                }
                                // 如果状态等于2 表示已经结束
                                if (item.status === 2) {
                                    clearInterval(this.timer)
                                    if (this.dialogMessage && this.dialogMessage.indexOf('Successfully') > 0) {
                                        this.dialogTitle = 'Docker image build 成功详情'
                                    } else {
                                        this.dialogTitle = 'Docker image build 失败详情'
                                    }
                                    this.buildProButton = false
                                    this.dialogVisble = true
                                }
                            }
                        }
                   }, 1 * 1000)
                },
                async downloadSystemDict() {
                    this.loading = true
                    this.showLoadingMessage = '正在下载系统指纹库文件......'
                    const ret = await download_dict(name)
                    this.loading = false
                    if (!ret || !ret.status) {
                        this.dialogVisble = true
                        this.dialogTitle = '下载指纹文件失败'
                        this.dialogMessage = ret.data
                    }
                    this.stepStatus = '系统指纹库下载成功'
                    console.log('---downloadSystemDict---111--', ret)
                },
                async handleSelect(name) {
                    // 如果不存在添加，不存在删除
                    if (this.selectedName.indexOf(name) === -1) {
                        this.selectedName.push(name)
                    } else {
                        this.selectedName = utils_delete_arr_key(this.selectedName, name)
                    }
                    // 暂时只支持单个应用
                    /* if (this.selectedName.indexOf(name) === -1) {
                        this.selectedName = []
                        this.selectedName.push(name)
                    } else {
                        this.selectedName = utils_delete_arr_key(this.selectedName, name)
                    } */

                    console.log('---------------this.selectedName----------------', this.selectedName)
                },
                async getProcessService() {
                    // 检查是否有选择应用
                    const selectName = this.selectedName
                    console.log('------------getProcessService--------------', selectName)
                    if (this.multipleSelection.length) {
                        for (const item of this.multipleSelection) {
                            if (selectName.indexOf(item.name) === -1) {
                                selectName.push(item.name)
                            }
                        }
                    }

                    // 扫描前先清空原来数据
                    let tmpTitle = ''
                    let index = 0
                    for (const item of selectName) {
                        if (index === 0) {
                            tmpTitle += item
                        } else {
                            tmpTitle += ' & ' + item
                        }
                        index++
                    }
                    this.serviceTitle = tmpTitle + '服务文件列表'
                    this.serviceData = []
                    this.loading = true
                    // 暂时只支持单个应用
                    this.showLoadingMessage = '正在创建Docker file文件......'
                    const ret = await get_process(selectName)
                    console.log('-----111------', ret)
                    this.loading = false
                    const showList = []
                    if (ret && ret.status && ret.data.length) {
                        for (const item of ret.data) {
                                showList.push({
                                name: item,
                                move: true // 默认迁移
                            })
                        }
                    }
                    this.serviceData = showList
                    this.serviceDataLength = showList.length
                    this.serviceTitle = tmpTitle + '服务迁移文件数量' + showList.length + '个'
                    console.log('---getProcess-----', ret)
                },
               async handleClick() {
                    console.log('-----------', this.ativeName)
                    if (this.ativeName === 'dockerfile') {
                        this.downloadDockerFile()
                    } else if (this.ativeName === 'dockerimage') {
                        const ret = await scan_image()
                        if (ret.status && ret.data) {
                            this.imageData = ret.data
                        }
                    }
                },
                async downloadImage(row) {
                    console.log('----downloadImage-------', row)
                    this.showLoadingMessage = '正在下载docker镜像文件......'
                    this.loading = true
                    const ret = await download_image(row)
                    this.loading = false
                    console.log('---downloadImage--------', ret)
                    if (ret && ret.data && ret.data.status && ret.data.data) {
                        const url = 'http://' + window.location.host + '/' + ret.data.data
                        window.location.href = url
                    }
                },
                async downloadServiceFile() {
                    console.log('----downloadServiceFile-------')
                    this.showLoadingMessage = '正在下载服务文件......'
                    const selectName = this.selectedName
                    console.log('------------getProcessService--------------', selectName)
                    if (this.multipleSelection.length) {
                        for (const item of this.multipleSelection) {
                            if (selectName.indexOf(item.name) === -1) {
                                selectName.push(item.name)
                            }
                        }
                    }

                    // 扫描前先清空原来数据
                    let tmpTitle = ''
                    let index = 0
                    for (const item of selectName) {
                        if (index === 0) {
                            tmpTitle += item
                        } else {
                            tmpTitle += '_' + item
                        }
                        index++
                    }
                    if (!tmpTitle) {
                        this.$message({
                            showClose: true,
                            message: '请选择服务',
                            type: 'warning'
                        })
                        return
                    }
                    this.loading = true
                    const ret = await download_service_file(tmpTitle)
                    this.loading = false
                    console.log('---downloadServiceFile--------', ret)
                    if (ret && ret.data && ret.data.status && ret.data.data) {
                        const url = 'http://' + window.location.host + '/' + ret.data.data
                        window.location.href = url
                    }
                },
                async deleteImage(row) {
                    console.log('----deleteImage-------', row)
                    const smit = await this.$confirm('请确认是否需要删除' + row.name + 'Docker镜像文件?', '消息提醒', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        return true
                    }).catch(() => {
                        return false
                    })
                    if (!smit) {
                        return
                    }
                    this.loading = true
                    const ret = await delete_image(row)
                    this.loading = false
                    if (ret && ret.data && ret.data.status) {
                        this.$message({
                            showClose: true,
                            message: '删除成功',
                            type: 'success'
                        })
                        // 如果删除成功在重新获取一次数据
                        this.handleClick()
                    } else {
                        this.dialogVisble = true
                        this.dialogTitle = '删除docker镜像失败'
                        this.dialogMessage = ret.data.data
                    }

                },
                async testImage(row) {
                    console.log('-----testImage------', row)
                    this.$prompt('请输入Docker指令', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(({ value }) => {
                        console.log('----docker run---------', value)
                        this.dockerRunCmd(value)
                        
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        })
                    })
                },
                async dockerRunCmd(cmd) {
                    this.showLoadingMessage = '正在创建Docker容器......'
                    this.loading = true
                    const ret = await docker_run(cmd)
                    this.loading = false
                    if (ret && ret.data && ret.data.data) {
                        this.dialogMessage = ret.data.data
                        console.log('------dockerRunCmd---------', ret)
                        if (this.dialogMessage && this.dialogMessage.indexOf('Error') > 0) {
                            this.dialogTitle = 'Docker run 错误详情'
                        } else {
                            this.dialogTitle = 'Docker run 成功详情'
                        }
                        this.dialogVisble = true
                    }
                },
                async addDockerFile() {
                    this.$prompt('请输入需要迁移的文件路径', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(({ value }) => {
                        console.log('----addDockerFile--------', value)
                        this.addDockerFilePath(value)
                        
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        })
                    })
                },
                async addDockerFilePath(path) {
                    const ret = await add_docker_path(path)
                    console.log('------------', ret)
                    if (ret && ret.data && ret.data.status) {
                        this.serviceDataLength++
                        this.serviceData.unshift({
                                name: ret.data.data,
                                move: true // 默认迁移
                            })
                    } else {
                        this.$message({
                            showClose: true,
                            message: ret.data.data,
                            type: 'warning'
                        })
                    }
                }
            }
        })
    </script>
</html>